<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/account_management.css" th:href="@{/back_css/account_management.css}" media="all">
</head>
<body>
<div class="container">
    <div class="container_top">
        <div style="display: none">
            <input type="text" placeholder="请输入关键字" class="layui-input" name="id" id="demoReload" autocomplete="off">
            <button data-type="reload" class="layui-btns"><i class="layui-icon layui-icon-search"></i></button>
        </div>
        <div th:if="${level}!=4">
            <button type="button" id="add_account" class="layui-btn layui-btn-xs layui-btn-warm">+添加账号</button>
        </div>
    </div>
    <div class="container_content">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<div class="edit_id" style="display: none;">
    <form class="layui-form" action="" method="get">
        <div>
            <span>编辑账号</span>
            <button id="close" type="button"><i class="layui-icon">&#x1006;</i></button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号：</label>
            <div class="layui-input-block">
                <input type="text" id="edit_username" readonly name="ADMIN_ACCOUNT" lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" name="ADMIN_PASSWORD" lay-verify="required|newPwd" autocomplete="off" placeholder="请输入密码"
                       class="layui-input" id="password">
                <img src="/img/see.png" onclick="showhide()" id="eye" title="查看密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码：</label>
            <div class="layui-input-block">
                <input type="password" name="password2" lay-verify="required|confirmPwd" autocomplete="off"
                       placeholder="请确认密码" class="layui-input" id="password2">
                <span id="password2_tips"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="edit_adminname" name="ADMIN_NAME" lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">推荐单位：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select id="edit_district" name="DISTRICT_ID" lay-verify="required">
                        <option value="">推荐单位</option>
                        <option th:each="districtLists:${districtLists}" th:value="${districtLists.ID}"
                            th:text="${districtLists.DISTRICT_NAME}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话：</label>
            <div class="layui-input-block">
                <input type="text" id="edit_mobile" name="PHONE" maxlength="11" autocomplete="off"
                       placeholder="请输入电话号码" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="action" id="form_action">
        <div class="layui-form-item_btn">
            <button type="button" class="layui-btn " id="cancel">取消</button>
            <button lay-submit class="layui-btn" id="sure" lay-filter="formDemo">确定</button>
        </div>
        <input type="hidden" id="dis" th:value="${ads}"/>
        <input type="hidden" id="isSup" th:value="${isSup}"/> <!-- 是否是超级管理员-->
        <input type="hidden" id="level" th:value="${level}"/> <!-- 管理员等级-->
    </form>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" data-method="notice" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>

</script>
<script type="text/javascript">
    var pwd = document.getElementById("password");
    function showhide(){
        if (pwd.type == "password") {
            pwd.type = "text";
        }else {
            pwd.type = "password";
        }
    }
</script>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;

        table_render('/getAllAdmin');

        function table_render(url) {
            table.render({
                elem: '#test'
                , width: 980
                , even: true
                , page: true
                , url: url
                , limit: 20
                , limits: [20]
                , id: 'idTest'
                , cols: [[
                    {type: 'checkbox', fixed: 'left', style: 'display:none'},
                    {field: 'id', width: 100, title: '序号'}
                    , {field: 'admin_ACCOUNT', width: 120, title: '用户名'}
                    , {type: 'admin_PASSWORD', fixed: 'left',hide: true}
                    , {field: 'district_ID',  title: '推荐单位/ID',hide:true}
                    , {field: 'district_NAME', width: 143, title: '推荐单位'}
                    , {field: 'parent_NAME', width: 142, title: '上级单位'}
                    , {field: 'admin_NAME', title: '真实姓名', width: 110}
                    , {field: 'phone', title: '联系电话', width: 170}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 190}
                ]]
            });
        }

//这里以搜索为例
        active = {
            reload: function () {
                var demoReload = $('#demoReload');
                // console.log(demoReload)
                //执行重载
                table.reload('idTest', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: demoReload.val()
                    }
                });
            }
        };

        $('.layui-btns').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('<span style="color:#f00;">该管理员下可能有发布活动，请确认该管理员下无活动后删除！(请确认该管理员下无下属管理员！若删除该管理员，则下属管理员自动删除。删除的管理员和下属管理员发布的活动都将会删除！)</span>', function (index) {
                    layer.close(index);
                    layer.confirm('<span style="color:#f00;">请再次确认是否删除!</span>', {
                        btn: ['狠心删除', '我再想想']
                    }, function(index, layero){
                        $.ajax({
                            url:'/deleteAdmin',
                            async: false,
                            type:"POST",
                            data:{ADMIN_ACCOUNT:data.admin_ACCOUNT},
                            success: function(data){
                                //console.log(data)
                                if(data=="success"){
                                    layer.msg("删除成功！")
                                    $(".layui-laypage-btn").click();
                                }else if(data=="fail"){//已有该用户名
                                    layer.msg("正在加载···")
                                    $(".layui-laypage-btn").click();
                                }else if(data=="chaoji"){//已有该用户名
                                    layer.msg("超级管理员不可删除！")
                                    $(".layui-laypage-btn").click();
                                }
                            }
                        })
                    });
                });
            } else if (obj.event === 'edit') {
                layer.confirm('<span style="color:#f00;">更改推荐单位时，只允许更改子级推荐单位，不可隔级更改！若隔级更改则需确保该推荐单位下无子推荐单位！</span>', function (index) {
                    layer.close(index);
                    var edit_win=$(".edit_id").eq(0);
                    edit_win.find("#password").val('');
                    edit_win.find("#password2").val('');
                    edit_win.find("#edit_adminname").val(data.admin_NAME);
                    edit_win.find("#password").val(data.admin_PASSWORD);
                    edit_win.find("#form_action").val("/updateAdmin");
                    edit_win.find("#edit_username").prop("readonly",true);
                    edit_win.find("#edit_username").val(data.admin_ACCOUNT);
                    edit_win.find("#edit_mobile").val(data.phone);
                    edit_win.find("#edit_district").val(data.district_ID);
                    form.render('select');
                    $(".edit_id").css("display", "block");
                });
            }
        });
        $("#password2").blur(function () {
            if ($("#password").val() == $("#password2").val()) {
                $(this).next().css("display", "none")
            } else {
                $(this).next().css("display", "inline-block");
                $(this).next().html("两次密码输入不一致，请重新输入")
            }
        })
        var phone = /^((\+86)|(86))?(1[3|4|5|6|7|8])\d{9}$/;
        form.verify({
            newPwd: function (value, item) {

                if (value.length < 6) {
                    return "密码长度不能小于6位";
                }
            },
            phonesub: function (value) {
                var flag = phone.test(value);
                if (!flag) {
                    return "请输入正确号码"
                }
            },
            confirmPwd :function (value) {
                if ($("#password").val() == $("#password2").val()) {
                    $(this).next().css("display", "none")
                } else {
                    $(this).next().css("display", "inline-block");
                    $(this).next().html("两次密码输入不一致，请重新输入")
                    return "两次密码输入不一致，请重新输入";
                }
            }
        });
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url:data.field.action,
                async: false,
                type:"POST",
                data:data.field,
                success: function(data){
                    //console.log(data)
                    if(data=="haveDistrict"){//已有该地区
                        layer.msg("所选地区已有管理员！")
                    }else if(data=="haveUserName"){//已有该用户名
                        layer.msg("该用户名已存在！")
                    }else if(data=="success"){
                        $(".layui-laypage-btn").click();
                        edit_win.css("display", "none");
                    }
                }
            })
            return false;
        });
        $("#add_account").on("click", function () {
            var edit_win=$(".edit_id").eq(0);
            edit_win.find("#form_action").val("/addAdmin");
            edit_win.find("#edit_username").prop("readonly",false);
            edit_win.find("#password").val('');
            edit_win.find("#password2").val('');
            edit_win.find("#edit_username").val('');
            edit_win.find("#edit_adminname").val('');
            edit_win.find("#edit_mobile").val('');
            edit_win.find("#edit_district").val('');
            form.render('select');
            edit_win.css("display", "block");
        });
        $("#cancel").on("click", function () {
            $(".edit_id").css("display", "none");
        });
        $("#close").on("click", function () {
            $(".edit_id").css("display", "none");
        });
    });
</script>
</body>
</html>
